<script src="../../assets/format.js"></script>
<template>
    <div class="knowledgebase_main">
<!--        标题部分-->
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">知识库</h1>
                <span class="" style="margin-left: 10px">/ QA库 / 企业内部知识汇总</span>
            </el-col>
        </el-row >

<!--        操作部分-->
        <el-row class="nav" >
            <el-col>
                <div class="nav-item" @click="dialogFormVisible = true"><i class="iconfont icon-qianbi"></i> 新增文档</div>

                <div class="nav-item" >
                    <el-dropdown @command="asdf">
                        <span class="nav-dropdown-link" style="color:rgb(51,51,51);"><i class="el-icon-arrow-down el-icon--left"></i>排序选择</span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="asd in orderBy" :key="asd.orderById" :command="asd.orderByName">{{asd.orderByName}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>

                <router-link to="/KCManager"><div class="nav-item" ><i class="iconfont icon-m-weixinwenzhang"></i> 类型管理</div></router-link>

                <el-form style="display:inline-block">
                    <div class="nav-item" style="border:none">
                        <el-input v-model="searchParam" clearable placeholder="请输入内容"></el-input>
                    </div>
                    <div style="display:inline-block">
                        <el-button  @click="searchK">搜索</el-button>
                    </div>
                </el-form>

            </el-col>
        </el-row>

<!--        数据内容-->
        <div class="content" style=" border-radius: 4px" v-loading="loading">

            <el-tabs style="margin-bottom: 0px;height: 41px" type="card" @tab-click="changeTab">

                <el-tab-pane label="全部" name="all"></el-tab-pane>

                <template v-for="types in knowledgeClassify">
                    <el-tab-pane :label="types.essClassify" ></el-tab-pane>
                </template>

            </el-tabs>

            <el-table :data="tableData" style="width: 100%;min-height: 300px;margin-top: 0px" @cell-click="showOne">

                <el-table-column prop="essId" type="selection" width="50" header-align="center" align="center" ></el-table-column>

                <el-table-column prop="essId" label="编号" width="100">
                </el-table-column>

                <el-table-column prop="essTitle" label="标题"  >
                </el-table-column>

                <el-table-column prop="essContent" label="内容概要" show-overflow-tooltip width="200">
                </el-table-column>

                <el-table-column prop="emp.empName" label="发布人">
                </el-table-column>

                <el-table-column prop="numPeo" label="收藏数" width="100" >
                </el-table-column>

                <el-table-column prop="releaseTime" label="发布时间" >
                    <template slot-scope="s">
                        {{s.row.releaseTime | formatDate}}
                    </template>
                </el-table-column>

                <el-table-column label="管理" >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="editOne(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deteleOne(scope.row)"></el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!--    分页-->
            <div class="pagePlug">
                <div class="block" style="margin-top:10px">
                    <el-pagination background layout="total, prev, pager, next"
                                   :total="totalSize"
                                   :page-size="pageSize"
                                   @current-change="changePage" >
                    </el-pagination>
                </div>
            </div>
        </div>

<!--        新增弹窗  -->
        <el-dialog title="新增文档" :visible.sync="dialogFormVisible" width="40%">
            <el-form :model="knowledge" >
                <el-row>
                    <el-col class="NTtitle">标题:</el-col>
                    <el-col><el-input v-model="knowledge.essTitle" autocomplete="off" style="width: 500px"></el-input></el-col>
                </el-row>

                <el-row>
                    <el-col class="NTtitle">内容:</el-col>
                    <el-col><el-input
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 10}"
                            placeholder="请输入内容"
                            v-model="knowledge.essContent"
                            style="width: 500px">
                    </el-input>  </el-col>
                </el-row>

                <el-row>
                    <el-col class="NTtitle">分类:</el-col>
                    <el-col><el-select v-model="knowledge.knowledgeClassify" value-key="essClassifyId" placeholder="请选择分类" style="width: 200px">
                        <el-option v-for="item in knowledgeClassify"
                                   :key="item.essClassifyId"
                                   :label="item.essClassify"
                                   :value="item"></el-option>
                    </el-select></el-col>
                </el-row>


            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false,addOne()">提 交</el-button>
            </div>
        </el-dialog>

<!--        查看内容弹窗-->
        <el-dialog title="文章内容" :visible.sync="dialogEssayVisble" width="60%">

            <el-form label-width="150px" style="overflow:hidden;padding-top:20px" >
                <el-form-item label="文章标题：">
                    {{dialogEssay.title}}
                </el-form-item>
                <el-form-item label="文章编号：" class="inline__">
                    {{dialogEssay.kNo}}
                </el-form-item>
                <el-form-item label="作者：" class="inline__">
                    {{dialogEssay.auther}}
                </el-form-item>
                <el-form-item label="服务内容：" >
                    {{dialogEssay.essay}}
                </el-form-item>
                <el-form-item label="发布时间：" class="inline__">
                    {{dialogEssay.time}}
                </el-form-item>
                <el-form-item label="收藏人数：" class="inline__">
                    {{dialogEssay.sum}}
                </el-form-item>
                <el-form-item label="审核状态：">
                    <span style="margin-right: 50px">{{dialogEssay.check==1?"通过":"未通过"}}</span>
                </el-form-item>
                <template v-if="dialogEssay.check==0">
                    <el-form-item label="审批操作：" class="inline__">
                        <el-button type="primary" @click="checkOne">通过审批</el-button>
                    </el-form-item>
                </template>

                <br/><br/><br/><br/>
            </el-form>

        </el-dialog>


    </div>
</template>

<script>
    import {formatTimeToStr} from '@/assets/format.js'
    export default {
        name: "KnowledgeBase",
        data: function() {
            return {
                loading:true,
                tableData:[],
                searchParam:'',//搜索框内容
                kcName:'',//表头名字
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                orderBy:[
                    {orderById:1,orderByName:'最新发布/修改排序'},
                    {orderById:2,orderByName:'最多人收藏'},
                    {orderById:3,orderByName:'取消排序'}
                ],
                orderByChose:'',
                knowledge:{},
                knowledgeClassify:{},
                dialogFormVisible: false,
                dialogEssayVisble: false,
                dialogEssay:{},
                knowledge: {
                    essId:0,
                    essTitle: '',
                    essContent: '',
                    releaseTime: '',
                    numPeo:0,
                    knowledgeClassify:{
                        essClassifyId:0,
                        essClassify:'',
                        numEss:0
                    },
                    emp: {
                        empId: 1,
                        empName: 'admin'
                    },
                    check:0
                }
            };
        },
        methods: {
            asdf(row){
                if('最新发布/修改排序'== row){
                    this.orderByChose = 'rTime';
                }else if('最多人收藏' == row){
                    this.orderByChose = 'likeNum';
                }else if('取消排序' == row){
                    this.orderByChose = '';
                }
                this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName,this.orderByChose);
            },
            showOne(row, column){
                this.dialogEssay={
                    kNo:row.essId,
                    title:row.essTitle,
                    essay:row.essContent,
                    auther:row.emp.empName,
                    time:row.releaseTime,
                    sum:row.numPeo,
                    check:row.check
                }
                if("标题"==column.label){
                    this.dialogEssayVisble = true;
                }
            },
            addOne(){
                this.$axios.post("api/after-sale/knowledge/add-knowledge",this.knowledge)
                    .then(v=>{
                        //刷新数据
                        this.initData(this.currPage,this.pageSize);
                        //关闭弹窗
                        this.dialogFormVisible = false;
                        //重置数据
                        this.knowledge = {
                            essId:0,
                            essTitle: '',
                            essContent: '',
                            releaseTime: '',
                            numPeo:0,
                            knowledgeClassify:{
                                essClassifyId:0,
                                essClassify:'',
                                numEss:0
                            },
                            emp: {
                                empId: 0,
                                empName: ''
                            },
                            check:0
                        };
                    }).catch();
            },
            initData(currPage,pageSize,search,kcName,orderByChose){
                this.loading = true;
                this.$axios.get("api/after-sale/knowledge/knowledge-list",{params:{page:currPage,size:pageSize,search:search,kcName:kcName,orderByChose:orderByChose}})
                .then(v=>{
                    this.tableData = v.data.rows;
                    this.totalSize = v.data.total;
                    this.loading = false;
                }).catch();
            },
            searchK(){
                this.initData(1,this.pageSize,this.searchParam,this.kcName,this.orderByChose);
            },
            initKnowledgeClassify(){
                this.$axios.get("api/after-sale/knowledge/knowledgeClassify-list")
                .then(v=>{
                    this.knowledgeClassify = v.data;
                }).catch();
            },
            changePage(val){
                //val就是当前页码
                this.initData(val,this.pageSize,this.searchParam,this.kcName,this.orderByChose);
            },
            changeTab(tab){
                var KCname = tab.label;
                if (KCname=='全部'){
                    KCname ='';
                }
                this.kcName = KCname;
                this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName,this.orderByChose);
            },
            editOne(k){
                this.dialogFormVisible = true;
                this.knowledge= {
                    essId:k.essId,
                    essTitle: k.essTitle,
                    essContent: k.essContent,
                    essClassifyId:k.essClassifyId,
                    empId:k.empId,
                    releaseTime:k.releaseTime,
                    numPeo:k.numPeo,
                    knowledgeClassify:{
                        essClassifyId:k.knowledgeClassify.essClassifyId,
                        essClassify:k.knowledgeClassify.essClassify,
                        numEss:k.knowledgeClassify.numEss
                    },
                    emp: {
                        empId: k.emp.empId,
                        empName: k.emp.empName
                    }
                }
            },
            deteleOne(k){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("api/after-sale/knowledge/delete-k",this.qs.stringify({kNo:k.essId}))
                        .then(v=>{
                            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName,this.orderByChose);
                        }).catch();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            checkOne(){
                this.$axios.post("api/after-sale/knowledge/knowledgeCheck",this.qs.stringify({essId:this.dialogEssay.kNo}))
                .then(v=>{
                        this.global.mes_success("审批成功！")
                }).catch();
                this.dialogEssayVisble = false;
                this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName,this.orderByChose);
            }
        },
        created:function() {
            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName,this.orderByChose);
            this.initKnowledgeClassify();
        },
        filters: {
            formatDate: function(time) {
                if(time!=null&&time!="")
                {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                }else{
                    return "";
                }
            }
        }
    };
</script>

<style scoped="scoped">
    *{margin: 0;padding: 0;font-size: 14px;}
    .knowledgebase_main{background: #e4e7ee}
    .head{height:70px;background: #fcfbfd;line-height: 70px}
    .contract_title{display: inline-block;font-weight: unset;margin-left: 20px;font-size: 25px;}
    .el-col span{color: #b4b4bc}

    .nav{border-radius: 4px;margin: 20px;background: #fcfbfd;width: 100%-40px;height: 55px;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    .nav .nav-item{color: rgb(51,51,51);display: inline-block;height:25px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 25px;cursor: pointer}

    .content{min-height:350px;margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    /*分页*/
    .pagePlug{
        height: 50px;
        padding-top: 20px;
    }
    .active {
        background-color: rgb(67,149,255) !important;
    }

    /*操作按钮*/
    .el-table .el-button{width: 30px;height: 30px}
    .el-button.is-circle{padding: 2px !important;}

    /*    弹窗*/
    .NTtitle{
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    .inline__{width:50%!important;display:inline-block}

</style>